<template>
  <section class="index-page">
    <v-menu></v-menu>
    <div class="content-box">
      <div class="top-body">
        <header class="content-head">
          <div>
            <i class="iconfont icongengduo" style="font-size:22px;" @click="switchMenu"></i>
          </div>
          <div>
            <div class="form-tool">
              <div>
                <div class="icon-box">
                  <i :class="['iconfont', curPage.icon]"></i>
                </div>
                <span class="title-style vertical-middle">{{ curPage.name }}</span>
              </div>
              <div style="padding-right:20px;">
                <el-link :underline="false" @click="onToUrl">
                  <i class="el-icon-setting vertical-middle" style="font-size:18px;"></i>
                  <span class="vertical-middle">系统设置</span>
                </el-link>
              </div>
            </div>
          </div>
          <div>
            <div>
              <el-badge>
                <i class="el-icon-message my-icon" title="消息/通知"></i>
              </el-badge>
            </div>
            <router-link tag="div" to="/page/helpIndex">
              <i class="el-icon-question my-icon" title="帮助中心"></i>
            </router-link>
            <div @mouseenter="onMouseenter" @mouseleave="onMouseleave">
              <img :src="adminUser.head | imageUrl" class="vertical-middle" style="width:25px;height:25px;border-radius: 50%;" />
              <span class="vertical-middle">{{ adminUser.memberName }}</span>
              <i class="el-icon-caret-bottom vertical-middle"></i>
              <transition name="el-fade-in-linear">
                <ul v-if="isShowUserMenu" class="user-dropdown">
                  <li @click="dialogPwd = true">
                    <span>修改密码</span>
                  </li>
                  <li @click="$router.push('/')">
                    <i class="iconfont icon-icon"></i>
                    &nbsp;
                    <span class="vertical-middle">退出</span>
                  </li>
                </ul>
              </transition>
            </div>
          </div>
        </header>
        <!-- 快捷导航 -->
        <nav-menu></nav-menu>
      </div>
      <div class="content-body">
        <div class="no-scroll" style="width:100%;">
          <keep-alive :include="includeCom">
            <router-view v-if="menuArray.length > 0 && $root.showView"></router-view>
          </keep-alive>
        </div>
        <div class="v-loading" v-show="vloading" v-loading="vloading"></div>
        <update-pwd v-model="dialogPwd"></update-pwd>
      </div>
    </div>
  </section>
</template>
<script>
import { mapState } from "vuex";
import "@/_css/home.scss";
export default {
  computed: {
    ...mapState(["includeCom", "menuMini", "vloading", "curPage", "menuArray"])
  },
  data() {
    return {
      dialogPwd: false,
      isShowUserMenu: false //用户个人菜单
    };
  },
  created() {
    let th = this;
  },
  methods: {
    //mini菜单开关
    switchMenu() {
      let th = this;
      th.$store.commit("Set_menuMini", !th.menuMini);
    },
    onMouseenter() {
      let th = this;
      th.isShowUserMenu = true;
    },
    onMouseleave() {
      let th = this;
      th.isShowUserMenu = false;
    },
    //打开配置后台
    onToUrl() {
      let th = this;
      if (process.env.VUE_APP_BF == "TRUE") {
        window.location.href = `http://172.10.110.40:10001/?account=${th.adminUser.memberLogin}&token=${th.adminUser.token}`;
      } else if (process.env.VUE_APP_TEST == "TRUE") {
        window.location.href = `http://test.his.admin.wisesg.com/?account=${th.adminUser.memberLogin}&token=${th.adminUser.token}`;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href = `http://hisa.u-baby.com/?account=${th.adminUser.memberLogin}&token=${th.adminUser.token}`;
      }
    }
  },
  watch: {
    $route(n, o) {
      let th = this;
      th.showLoading(false);
    }
  },
  components: {
    "v-menu": () => import("./_com/menu.vue"),
    "nav-menu": () => import("./_com/nav-menu.vue"),
    "update-pwd": () => import("./_com/updatePassword.vue")
  }
};
</script>
